var path = "../";
var lineList = [];
var barList = [];
var date = [];
var myChart = echarts.init(document.getElementById('gaikuangDiv'));
//异步加载数据

myChart.showLoading();
$.ajax({
    type: "post",
    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url: path + "online/time",    //请求发送到getTig处
    data: {type: 1},
    dataType: "json",        //返回数据形式为json
    success: function (result) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result.lineList.length != undefined) {
            for (var i = 0; i < result.lineList.length; i++) {
                lineList.push(result.lineList[i].tigLineNum);
            }
            for (var i = 0; i < result.lineList.length; i++) {
                if (result.lineList[i].tigBarNum != undefined) {
                    barList.push(result.lineList[i].tigBarNum);
                }
            }
            for (var i = 0; i < result.lineList.length; i++) {
                if (result.lineList[i].tigHour != undefined) {
                    date.push(result.lineList[i].tigHour);
                }
            }
            myChart.hideLoading();
            var option = setOptionParam(result);
            myChart.setOption(option);
            $(window).resize(function(){
                myChart.resize();
            });
            window.onresize = myChart.resize();
        } else {
            myChart.clear();
            option.series[0].data = "暂无数据"
            myChart.setOption(option);
        }
    },
    error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
});

function onlineNumber(type) {
    $.ajax({
        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: path + "online/time",    //请求发送到getTig处
        data: {type: type},
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result.lineList.length != undefined) {
                lineList = [];
                date = [];
                for (var i = 0; i < result.lineList.length; i++) {
                    if (result.lineList[i].tigLineNum != undefined) {
                        lineList.push(result.lineList[i].tigLineNum);
                    }
                }
                for (var i = 0; i < result.lineList.length; i++) {
                    if (result.lineList[i].tigBarNum != undefined) {
                        barList.push(result.lineList[i].tigBarNum);
                    }
                }
                for (var i = 0; i < result.lineList.length; i++) {
                    if (result.lineList[i].tigHour != undefined) {
                        date.push(result.lineList[i].tigHour);
                    }
                }
                var option = setOptionParam(result);
                myChart.clear();
                if (type != 1) {
                    option.series[0].data = [];
                    option.series[1].data = lineList;
                }
                myChart.setOption(option);
                $(window).resize(function(){
                    myChart.resize();
                });
                window.onresize = myChart.resize();
            } else {
                myChart.clear();
                option.series[0].data = "暂无数据"
                myChart.setOption(option);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
}

function setOptionParam(result) {
    if (result.lineList.length != undefined) {
        var option = {
            title: {
                left: '6%',
                textStyle: {
                    fontSize: 14,
                    color: '#333'          // 主标题文字颜色
                },
                text: '今日总在线时长'
            },
            tooltip: {},
            legend: {
                data: ['今日总在线时长', '昨日总在线时长']
            },
            xAxis: {
                data: date
            },
            dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }],
            yAxis: [
                {
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            topic:{
                data:['门店号','设备编号','在线时间','播放次数']
            },
            toolbox: {
                show: true,
                orient: 'horizontal',
                showTitle: true,
                feature: {
                    mark: {show: true},
                    left:'50%',
                    dataView: {
                        title:"设备时长详情表",
                        lang:["设备时长详情表","关闭","刷新"],
                        show: true,
                        readOnly: false,
                        optionToContent: function (opt) {
                            var axisData = opt.xAxis[0].data;
                            var series = opt.series;
                            var tdHeads = '<td  style="padding:0 10px">时间</td>';
                            series.forEach(function (item) {
                                tdHeads += '<td style="padding: 0 10px">'+item+'</td>';
                            });
                            var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';
                            var tdBodys = '';
                            for (var i = 0, l = axisData.length; i < l; i++) {
                                for (var j = 0; j < series.length; j++) {
                                    if(typeof(series[j].data[i]) == 'object'){
                                        tdBodys += '<td>'+series[j].data[i].value+'</td>';
                                    }else{
                                        tdBodys += '<td>'+ series[j].data[i]+'</td>';
                                    }
                                }
                                table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+ tdBodys +'</tr>';
                                tdBodys = '';
                            }
                            table += '</tbody></table>';
                            return table;
                        }
                    },
                    magicType: {
                        type: ['line']
                    },
                    saveAsImage: {
                        type: 'png',
                        show: true,
                        title: '保存为图片',
                    },
                    restore: {show: true}
                }
            },
            graphic: [
                {
                    type: 'group',
                    right: '200px',
                    top: 1,
                    children: [
                        {
                            type: 'text',
                            z: 100,
                            left: 'center',
                            top: 'middle',
                            style: {
                                fill: '#333',
                                text: [
                                    result.totalCount!=undefined?'今日在线总时长:'+result.totalCount:"平均在线时长:"+result.avgOnlineTime,
                                ].join('\n'),
                                font: '14px Microsoft YaHei'
                            }
                        }
                    ]
                }
            ],
            series: [
                {
                    name: '今日总在线时长',
                    type: 'bar',
                    data: lineList
                }, {
                    name: '昨日总在线时长',
                    type: 'line',
                    data: barList
                }
            ]
        };
        return option;
    } else {
        myChart.clear();
        option.series[0].data = "暂无数据"
        myChart.setOption(option);
    }
};